<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="false">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row :gutter="48">
          <a-col :span="12">
            <a-form-model-item label="证书名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="certificateName">
              <j-dict-select-tag
                :show-search="true"
                :disabled="formDisabled"
                v-model="model.certificateName"
                dictCode="erp_certificate_name_management,certificate_name,id"
                placeholder="请选择证书名称"/>
            </a-form-model-item>
          </a-col>
          <!-- <a-col :span="12">
            <a-form-model-item label="专业类别" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="professionalId">
              <a-input :disabled="formDisabled" v-model="model.professionalId" placeholder="请输入专业类别"></a-input>
            </a-form-model-item>
          </a-col> -->
          <a-col :span="12">
            <a-form-model-item label="注册类别" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="categoryId">
              <a-select
                show-search
                v-model="model.categoryId"
                placeholder="请选择注册类别"
                style="width: 100%"
                allowClear
                :disabled="formDisabled"
                :filterOption="filterOption"
                @change="handleCategoryChange"
              >
                <a-select-option v-for="d in categoryList" :key="d.id">
                  {{ d.registrationCategory }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="注册专业" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="professionalId">
              <a-select
                show-search
                allowClear
                :disabled="formDisabled"
                v-model="model.professionalId"
                placeholder="请选择注册专业"
                style="width: 100%"
                :filterOption="filterOption"
              >
                <a-select-option v-for="d in professionalList" :key="d.id">
                  {{ d.registeredProfessional }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="颁发日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="issueDate">
              <j-date :disabled="formDisabled" placeholder="请选择颁发日期" v-model="model.issueDate" style="width: 100%"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="颁发机构" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="issueBody">
              <a-input :disabled="formDisabled" v-model="model.issueBody" placeholder="请输入颁发机构"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="长期有效" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isAlways">
                <j-dict-select-tag @input="handleLongTermChange" type="radio" dictCode="YES_OR_NO" :disabled="formDisabled" v-model="model.isAlways" placeholder="请选择是否长期有效" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12" v-if="!model.isAlways || model.isAlways == 0">
            <a-form-model-item label="到期时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="endDate">
              <j-date :disabled="formDisabled" placeholder="请选择到期时间" v-model="model.endDate" style="width: 100%"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="继续教育时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="educationDate">
              <j-date :disabled="formDisabled" placeholder="请选择继续教育时间" v-model="model.educationDate" style="width: 100%"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="附件" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="attachment">
              <j-upload :disabled="formDisabled" v-model="model.attachment" fileFormat=".pdf, .PDF" isSingle></j-upload>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

import { getAction } from '@/api/manage'
import { validateBlankValue } from '@/utils/util'

export default {
  name: 'ErpEmployeeCertificateForm',
  components: {},
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  data() {
    return {
      model: {},
      labelCol: {},
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 24 },
      },
      confirmLoading: false,
      validatorRules: {
        certificateName: [
          { required: true, message: '请选择证书名称!' },
          // { validator: (rule, value, callback) => validateBlankValue('erp_employee_certificate', 'certificate_name', value, this.model.id, callback) },
        ],
        categoryId: [{ required: true, message: '请选择注册类别!', trigger: ['change', 'blur'] }],
        professionalId: [{ required: true, message: '请选择注册专业!', trigger: ['change', 'blur'] }],
        issueBody: [
          { required: true, message: '请输入颁发机构!' },
          { validator: (rule, value, callback) => validateBlankValue('erp_employee_certificate', 'issue_body', value, this.model.id, callback) },
        ],
        endDate: [
          { required: true, message: '请选择到期时间!' },
        ],
        isAlways: [{ required: true, message: '请选择是否长期有效!', trigger: ['change', 'blur'] }],
        endDate: [
          { required: true, message: '请选择到期时间!' },
        ],
        // attachment: [
        //   { required: true, message: '请输入附件!' },
        //   { validator: (rule, value, callback) => validateBlankValue('erp_employee_certificate', 'attachment', value, this.model.id, callback) },
        // ],
      },
      url: {
        add: '/api/erp/files/employee/erpEmployeeCertificate/add',
        edit: '/api/erp/files/employee/erpEmployeeCertificate/edit',
        queryById: '/api/erp/files/employee/erpEmployeeCertificate/queryById'
      },
      categoryList: [],
      professionalList: [],
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    },
  },
  created() {
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model));
  },
  methods: {
    async getCategoryData(){
      let res = await getAction('/api/erp/files/professional/erpProfessionalCategory/list', { pageNo: 1,pageSize: -1 })
      if (res.success) {
        this.categoryList = res.result.records || res.result
      } else {
        this.categoryList = [];
      }
    },
    // 是否长期有效
    handleLongTermChange (val) {
      if (!val || val == '0') {
        this.validatorRules.endDate = [{ required: true, message: '请选择到期时间!' }]
      } else {
        this.validatorRules.endDate = [{ required: false, message: '请选择到期时间!' }]
      }
      this.$set(this.model,'endDate',null)
      this.$refs.form.clearValidate('endDate')
    },
    handleCategoryChange(val){
      if(val){
        if(this.categoryList.filter(v => v.id==val).length&&this.categoryList.filter(v => v.id==val)[0].children){
          this.professionalList = this.categoryList.filter(v => v.id==val)[0].children
        } else {
          this.professionalList = []
        }
      } else {
        this.professionalList = []
      }
      this.$set(this.model,'professionalId',undefined)
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
    add() {
      this.edit(this.modelDefault);
    },
    async edit(record) {
      await this.getCategoryData()
      this.$refs.form.clearValidate()
      this.model = Object.assign({}, record);
      if(this.model.id){
        if(this.categoryList.filter(v => v.id==record.categoryId).length&&this.categoryList.filter(v => v.id==record.categoryId)[0].children){
          this.professionalList = this.categoryList.filter(v => v.id==record.categoryId)[0].children
        } else {
          this.professionalList = []
        }
      } else {
        this.professionalList = []
      }
      if (!this.model.isAlways || this.model.isAlways == '0') {
        this.validatorRules.endDate = [{ required: true, message: '请选择到期时间!' }]
      } else {
        this.validatorRules.endDate = [{ required: false, message: '请选择到期时间!' }]
      }
      this.visible = true;
    },
    submitForm() {
      const that = this;
      // 触发表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          // that.confirmLoading = true;
          // let httpurl = '';
          // let method = '';
          // if (!this.model.id) {
          //   httpurl += this.url.add;
          //   method = 'post';
          // } else {
          //   httpurl += this.url.edit;
          //   method = 'put';
          // }
          // httpAction(httpurl, this.model, method).then((res) => {
          //   if (res.success) {
          //     that.$message.success(res.message);
          //     that.$emit('ok');
          //   } else {
          //     that.$message.warning(res.message);
          //   }
          // }).finally(() => {
          //   that.confirmLoading = false;
          // })
          that.$emit('ok',that.model);
        }

      })
    },
  }
}
</script>
